/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';

/* @styleguide Item Groups

<br/>
### tl;dr

  - Item groups come either `item-group` or `item-group-condensed` styles
  - The `item-group` style is for draggable tiems and `item-group-condensed` is for items that are not draggable

<br/>

```html
<div class="item-group">
  <div class="ig-header">
    <h2 class="ig-header-title element_toggler"
       aria-controls="group_1"
       aria-expanded="true"
       aria-label="Item Group Header toggle item visibility"
       role="button">
      <i class="icon-mini-arrow-down"></i> Item Group Header
    </h2>
  </div>
  <ul class="ig-list" id="group_1">
    <li>
      <div class="ig-row">
        <div class="ig-row__layout">
          <div class="ig-type-icon" aria-hidden="true">
            <i class="icon-assignment" aria-hidden="true"></i>
          </div>
          <div class="ig-info">
            <a href="#" class="ig-title">
               Some Assignment
            </a>
            <div class="ig-details">
              <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
              <div class="ig-details__item"><b>Available</b> Nov 1</div>
              <div class="ig-details__item">10 pts</div>
            </div>
          </div>
          <div class="ig-admin">
            <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
              <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
            </span>

            <div class="inline-block">
              <a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
                <i class="icon-settings"></i>
                <i class="icon-mini-arrow-down"></i>
                <span class="screenreader-only">Settings</span>
              </a>

              <ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
                <li role="presentation">
                  <a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
                </li>
                <li role="presentation">
                  <a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>

    <li>
      <div class="ig-row ig-published ig-indent1">
        <div class="ig-row__layout">
          <div class="ig-type-icon" aria-hidden="true">
            <i class="icon-assignment"></i>
          </div>
          <div class="ig-info">
            <a href="#" class="ig-title">
               Some Assignment
            </a>
            <div class="ig-details">
              <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
              <div class="ig-details__item"><b>Available</b> Nov 1</div>
              <div class="ig-details__item">10 pts</div>
            </div>
          </div>
          <div class="ig-admin">
            <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
              <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
            </span>

            <div class="inline-block">
              <a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
                <i class="icon-settings"></i>
                <i class="icon-mini-arrow-down"></i>
                <span class="screenreader-only">Settings</span>
              </a>

              <ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
                <li role="presentation">
                  <a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
                </li>
                <li role="presentation">
                  <a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>

    <li>
      <div class="ig-text">
        Greek Civilization Essay
      </div>
    </li>

    <li>
      <div class="ig-row">
        <div class="ig-row__layout">
          <div class="ig-type-icon" aria-hidden="true">
            <i class="icon-assignment"></i>
          </div>
          <div class="ig-info">
            <a href="#" class="ig-title">
              Some Assignment
            </a>
            <div class="ig-details">
              <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
              <div class="ig-details__item"><b>Available</b> Nov 1</div>
              <div class="ig-details__item">10 pts</div>
            </div>
          </div>
          <div class="ig-admin">
            <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
              <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
            </span>

            <div class="inline-block">
              <a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
                <i class="icon-settings"></i>
                <i class="icon-mini-arrow-down"></i>
                <span class="screenreader-only">Settings</span>
              </a>

              <ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
                <li role="presentation">
                  <a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
                </li>
                <li role="presentation">
                  <a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>

  </ul>
</div>

<div class="item-group">
  <div class="ig-header">
    <h2 class="ig-header-title element_toggler"
       aria-controls="group_2"
       aria-expanded="true">
      <i class="icon-mini-arrow-down"></i> Item Group Header
    </h2>
  </div>
  <ul class="ig-list" id="group_2">
    <li>
      <div class="ig-row ig-row-empty">
        <div class="ig-empty-msg">
          No assignments in this Group
        </div>
      </div>
    </li>
  </ul>
</div>
```

*/

@mixin item-group-ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-group {
  border: 1px solid $ic-border-light;
  padding: $ic-sp;
  border-radius: $baseBorderRadius;
  margin-bottom: $ic-sp*2;
  background-color: $lightBackground;
}

.ig-header .name {
  color: #3d454c;
  @include fontSize(16px);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

.ig-text {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ig-header {
  min-height: 30px;
  padding-top: $ic-sp/2;
  padding-bottom: $ic-sp/2;

  .ig-header-title {
    text-decoration: none;
    @include fontSize(16px);
    font-weight: bold;
    line-height: 20px;
    margin: auto;
    display: inline-block;

    .icon-mini-arrow-down {
      vertical-align: middle;
    }
    .icon-mini-arrow-right {
      position: relative;
      top: -1px;
      vertical-align: middle;
    }
  }

  .btn {
    vertical-align: text-bottom;
  }
}

.ig-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

.ig-list li {
  margin: $ic-sp/2 0;
}

.ig-row__layout {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

.ig-info {
  flex: 1;
  min-width: 1px; // firefox flex breaks the parent container
  margin: 0 $ic-sp;
  @include breakpoint(desktop) {
    margin-left: $ic-sp;
    margin-right: $ic-sp*2;
  }
}

.ig-list .ig-row {
  position: relative;
  display: block;
  padding: $ic-sp $ic-sp/2 $ic-sp ($ic-sp/2 + 4); // add 4px for width of published-state border
  box-sizing: border-box;
  border-radius: $baseBorderRadius;
  color: $ic-font-color--subdued;
  border: 1px solid $ic-border-light;
  background: $ic-color-light;

  a.ig-title {
    color: $ic-font-color-dark;

    @if $use-high-contrast == false {
      text-decoration: none;
      &:hover, &:focus {
        text-decoration: underline;
      }
    }
  }

  .ellipses {
    @include item-group-ellipses;
  }

  &:hover {
    background-color: $ic-list-item-background--hover;
  }

  &:focus {
    background-color: $ic-list-item-background--hover;
  }

  &.ig-published:not(.student-view) {

    &:before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: -1px;
      left: -1px;
      width: 0.25rem;
      height: calc(100% + 2px);
      background-color: $ic-color-success;
      border-top: 1px solid darken($ic-color-success, 8%);
      border-bottom: 1px solid darken($ic-color-success, 8%);
    }

    &.student-view .ig-title {
      color: $ic-font-color-dark;
    }

  }

  &.ig-row-empty {
    box-sizing: border-box;
    height: $ic-sp*3; line-height: $ic-sp*3;
    padding: 0;
    border: 1px solid $ic-border-light;
    background: $ic-color-light;
  }

  .ig-empty-msg {
    text-align: center;
    color: $ic-font-color--subdued;
  }
}

.ig-type-icon {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  justify-content: center;
  align-items: center;

  .ig-published:not(.student-view) & {
    color: $ic-color-success;
  }
}

.ig-handle {
  + .ig-type-icon {
    margin-left: $ic-sp*0.75;
  }
}

.ig-title {
  display: inline-block;
  box-sizing: border-box;
  font-weight: bold;
  padding-right: $ic-sp;
  line-height: $ic-label-line-height;
  margin-bottom: $ic-sp/4;
  min-width: 1px; // firefox flex breaks the parent container
}

.ig-details {
  @include fontSize(12px);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.ig-details__item {
  white-space: nowrap;

  &--wrap-text {
    white-space: normal;
  }

  &:after {
    content: "\00a0\00a0|\00a0\00a0";
  }
  &:last-of-type {
    &:after { display: none; }
  }
}

.ig-admin {
  box-sizing: border-box;
  white-space: nowrap;
  padding-left: $ic-sp;
  @include breakpoint(desktop) { padding-left: 0; }

  .publish-icon, .lock-icon {
    margin-right: $ic-sp/2;
    i[class*=icon-]:before,
    i[class^=icon-]:before { @include fontSize(18px); }
  }

  > a {
    margin-right: 10px;
  }

  .mastery-path-icon {
    margin-right: 10px;
    padding: 2px 7px;
    font-size: 0.8em;

    i {
      margin-right: 5px;
    }
  }
}

.ig-list .icon-drag-handle {
  color: $ic-font-color-dark;
}

.ig-details [class^=span] {
  white-space: nowrap;
}

[class^=ig-indent] {
  // anything > 2 is still 60px;
  margin-left: 60px;
}

.ig-indent1 {
  margin-left: 20px;
}

.ig-indent2 {
  margin-left: 40px;
}

.ig-text {
  color: #3d454c;
  @include fontSize(15px);
}
